<template>
	<view class="wrap">
		<view class="personShow" v-if="loginInfo.length">
			<view class="personWrap" v-for="item in personShow" :key="item.personNo">
				<view class="title">
					<view class="orderNo">订单号：{{item.personNo}}</view>
					<view class="orderTime">下单时间：{{item.personTime}}</view>
				</view>
				<view class="main">
					<view class="item" v-for="item1 in item.goodsInfo" :key="item1.goods_id">
						<view class="pic">
							<image :src="item1.goods_pic[0].pics_url" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="goodsName">{{item1.goods_name}}</view>
							<view class="goodsNum">数量：×{{item1.goods_num}}</view>
							<view class="goodsPrice">价格:￥<text>{{item1.goods_price}}</text></view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<button size="mini" @click="deletePerson(item.personNo)">删除</button>
					<view class="total">
						实付款：<text>{{item.total}}元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="personNull" v-else>请<text @click="goLogin">登录</text>后查看订单</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personList:[],
				personShow:[],
				loginInfo:""
			}
		},
		methods: {
			deletePerson(id){
				this.personShow.forEach((v,i)=>{
					if(v.personNo == id){
						this.personShow.splice(i,1)
					}
				})
				this.personList.forEach((v,i)=>{
					if(v.personNo ==id){
						this.personList.splice(i,1)
					}
				})
				uni.setStorageSync("personList",this.personList)
			},
			goLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		},
		onShow() {
			this.loginInfo = uni.getStorageSync("loginInfo")
			if(uni.getStorageSync("personList")){
				this.personList = uni.getStorageSync("personList")
			}
			this.personShow = this.personList.filter(v=>v.loginInfo == this.loginInfo)
		}
	}
</script>

<style lang="less">
	.wrap{
		padding: 30rpx;
		.personNull{
			text{
				color: orangered;
				text-decoration: underline;
				font-size: 36rpx;
			}
		}
		.personWrap{
			padding-bottom: 40rpx;
			.title{
				display: flex;
				font-size: 26rpx;
				justify-content: space-between;
				height: 80rpx;
				border-bottom: 2rpx solid #EFEFEF;
			}
			.bottom{
				display: flex;
				width: 100%;
				justify-content: space-between;
				border-bottom: 1rpx solid #efefef;
				padding: 20rpx 0;
				.total{		
					text-align: right;
					font-size: 36rpx;
					font-weight: bold;
					text{
						color: red;
						font-weight: 400;
					}
				}
			}
			.main{
				.item{
					display: flex;
					padding: 20rpx 0;
					.pic{
						flex: 3;
						image{
							width: 100%;
						}
					}
					.info{
						flex: 5;
						display: flex;
						padding: 20rpx;
						flex-direction: column;
						justify-content: space-around;
						.goodsName{
							font-size: 36rpx;
							font-weight: bold;
						}
						.goodsNum{
							color: gray;
						}
						.goodsPrice{
							font-size: 36rpx;
							text{
								color: red;
							}
						}
					}
				}
			}
		}
		
	}
</style>
